<template>
  <el-drawer
      size="650px"
      class="ProPanelDrawer"
      v-model="visible"
      :show-close="false"
      @close="cancel"
      v-if="properties"
  >
    <!-- 标题 -->
    <template #header>
      <header class="header" v-if="value && value.type === 'start' && properties.title">
        {{ properties.title }}
      </header>
      <header class="header" v-else>
        <span
            @click="titleInputVisible = true"
            v-show="!titleInputVisible"
        >
          {{ properties.title }}
          <i class="el-icon-edit"></i>
        </span>
        <el-input
            size="small"
            v-model="properties.title"
            v-show="titleInputVisible"
        ></el-input>
        <el-select
            v-if="isConditionNode"
            v-model="properties.priority"
            size="small"
            class="priority-select"
        >
          <el-option
              v-for="item in priorityLength"
              :key="item"
              :value="item - 1"
              :label="'优先级' + item"
          ></el-option>
        </el-select>
      </header>
    </template>
    <!--  发起人  -->
    <section class="approver-pane" v-if="value && isStartNode">
      <el-tabs v-model="initiatorActiveName" class="pane-tab">
        <el-tab-pane label="设置发起人" name="config">
          <el-scrollbar v-if="value.type === 'start'">
            <div class="approverBody">
              <row-wrapper>
                <el-radio-group v-model="initiatorForm.assigneeType">
                  <el-radio v-for="item in initiatorAssigneeTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value"
                            class="radio-item">
                  </el-radio>
                </el-radio-group>
              </row-wrapper>
              <!--指定成员-->
              <row-wrapper title="选择人员" v-if="initiatorForm.assigneeType === 'user'">
                <FcUserSelect :multiple="true" ref="userSelect" v-model="initiatorCollection['user']"/>
              </row-wrapper>
              <row-wrapper v-if="initiatorForm.assigneeType === 'all'">
                <span style="color: #2c3e50">不指定发起人，所有人都可以发起流程</span>
              </row-wrapper>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="表单权限" name="formAuth">
          <el-scrollbar>
            <div class="form-auth-table">
              <header class="auth-table-header">
                <div class="row">
                  <div class="label">表单字段</div>
                  <el-radio-group v-model="initiatorFormOperate" class="radio-group"
                                  @change="changeAllInitiatorFormOperate">
                    <el-radio :value="2" label="可编辑"></el-radio>
                    <el-radio :value="1" label="只读"></el-radio>
                    <el-radio :value="0" label="隐藏"></el-radio>
                  </el-radio-group>
                </div>
              </header>
              <div class="auth-table-body">
                <div v-for="item in getInitiatorFormOperates()" :key="item.formId" class="row">
                  <div class="label">
                    <span class="required" v-show="item.required">*</span>
                    {{ item.label }}
                  </div>
                  <el-radio-group v-model="item.formOperate" class="radio-group">
                    <el-radio :value="2" label="可编辑"></el-radio>
                    <el-radio :value="1" label="只读"></el-radio>
                    <el-radio :value="0" label="隐藏"></el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </section>
    <!-- 审批人 -->
    <section class="approver-pane" v-if="value && isApproverNode">
      <el-tabs v-model="approverActiveName" class="pane-tab">
        <el-tab-pane label="设置审批人" name="config">
          <el-scrollbar v-if="value.type === 'approver'">
            <div class="approverBody">
              <row-wrapper>
                <el-radio-group v-model="approverForm.assigneeType">
                  <el-radio v-for="item in approverAssigneeTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value"
                            class="radio-item">
                  </el-radio>
                </el-radio-group>
              </row-wrapper>
              <!--发起人自己-->
              <row-wrapper v-if="approverForm.assigneeType === 'myself'">
                <span style="color: #2c3e50">发起人自己将作为审批人处理审批单</span>
              </row-wrapper>
              <!--主管-->
              <template v-else-if="approverForm.assigneeType === 'director'">
                <row-wrapper title="发起人的">
                  <el-select v-model="approverCollection['director']" size="small">
                    <el-option v-for="item in directorOptions" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </row-wrapper>
                <row-wrapper>
                  <el-checkbox v-model="useDirectorProxy" label="找不到主管时，由上级主管代审批">
                  </el-checkbox>
                </row-wrapper>
              </template>
              <!--角色-->
              <row-wrapper v-else-if="approverForm.assigneeType === 'role'" title="角色">
                <FcRoleSelect :multiple="true" ref="roleSelect" v-model="approverCollection['role']"/>
              </row-wrapper>
              <!--指定成员-->
              <row-wrapper v-else title="选择人员">
                <FcUserSelect :multiple="true" ref="userSelect" v-model="approverCollection['user']"/>
              </row-wrapper>
              <row-wrapper direction="column" title="多人审批方式">
                <el-radio-group v-model="approverForm.counterSign">
                  <el-radio v-for="item in counterSignOptions" :key="item.value" :label="item.label"
                            :value="item.value"
                            class="radio-item">
                  </el-radio>
                </el-radio-group>
              </row-wrapper>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="表单权限" name="formAuth">
          <el-scrollbar>
            <div class="form-auth-table">
              <header class="auth-table-header">
                <div class="row">
                  <div class="label">表单字段</div>
                  <el-radio-group v-model="approverFormOperate" class="radio-group"
                                  @change="changeAllApproverFormOperate">
                    <el-radio :value="2" label="可编辑"></el-radio>
                    <el-radio :value="1" label="只读"></el-radio>
                    <el-radio :value="0" label="隐藏"></el-radio>
                  </el-radio-group>
                </div>
              </header>
              <div class="auth-table-body">
                <div v-for="item in getApproverFormOperates()" :key="item.formId" class="row">
                  <div class="label">
                    <span class="required" v-show="item.required">*</span>
                    {{ item.label }}
                  </div>
                  <el-radio-group v-model="item.formOperate" class="radio-group">
                    <el-radio :value="2" label="可编辑"></el-radio>
                    <el-radio :value="1" label="只读"></el-radio>
                    <el-radio :value="0" label="隐藏"></el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </section>
    <!-- 抄送人   -->
    <section class="approver-pane copy-pane" v-if="value && isCopyNode">
      <el-tabs v-model="copyActiveName" class="pane-tab">
        <el-tab-pane label="抄送人" name="config">
          <el-scrollbar>
            <div class="approverBody">
              <row-wrapper>
                <el-radio-group v-model="copyForm.assigneeType">
                  <el-radio v-for="item in copyAssigneeTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value"
                            class="radio-item">
                  </el-radio>
                </el-radio-group>
              </row-wrapper>
              <!--主管-->
              <template v-if="copyForm.assigneeType === 'director'">
                <row-wrapper title="发起人的">
                  <el-select v-model="copyCollection['director']" size="small">
                    <el-option v-for="item in directorOptions" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </row-wrapper>
                <row-wrapper>
                  <el-checkbox v-model="copyUseDirectorProxy" label="找不到主管时，抄送至上级主管">
                  </el-checkbox>
                </row-wrapper>
              </template>
              <!--角色-->
              <row-wrapper v-else-if="copyForm.assigneeType === 'role'" title="角色">
                <FcRoleSelect :multiple="true" ref="roleSelect" v-model="copyCollection['role']"/>
              </row-wrapper>
              <!--指定成员-->
              <row-wrapper v-else title="选择人员">
                <FcUserSelect :multiple="true" ref="userSelect" v-model="copyCollection['user']"/>
              </row-wrapper>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="抄送权限" name="formAuth">
          <el-scrollbar>
            <div class="form-auth-table">
              <header class="auth-table-header">
                <div class="row">
                  <div class="label">表单字段</div>
                  <el-radio-group v-model="copyFormOperate" class="radio-group"
                                  @change="changeAllCopyFormOperate">
                    <!--                    <el-radio :value="2" label="可编辑"></el-radio>-->
                    <el-radio :value="1" label="只读"></el-radio>
                    <el-radio :value="0" label="隐藏"></el-radio>
                  </el-radio-group>
                </div>
              </header>
              <div class="auth-table-body">
                <div v-for="item in getCopyFormOperates()" :key="item.formId" class="row">
                  <div class="label">
                    <span class="required" v-show="item.required">*</span>
                    {{ item.label }}
                  </div>
                  <el-radio-group v-model="item.formOperate" class="radio-group">
                    <!--                    <el-radio :value="2" label="可编辑"></el-radio>-->
                    <el-radio :value="1" label="只读"></el-radio>
                    <el-radio :value="0" label="隐藏"></el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </section>
    <!-- 条件 -->
    <section class="condition-pane" v-if="value && isConditionNode">
      <row-wrapper title="发起人" v-if="showingPCons.includes(-1)">
        <FcUserSelect placeholder="请选择发起人" style="width: 100%" size="small" :multiple="true" ref="userSelect"
                      v-model="initiator"/>
      </row-wrapper>
      <template v-for="(item, index) in pconditions" :key="index">
        <!-- 计数 -->
        <row-wrapper
            :title="item.label"
            v-if="couldShowIt(item, 'el-input-number', 'fc-date-duration', 'fc-time-duration', 'fc-amount', 'fc-calculate')"
        >
          <template #default>
            <num-input
                title="输入的数字"
                v-model="item.conditionValue"
            />
          </template>
          <template #action>
            <el-icon @click="onDelCondition(item)">
              <Delete/>
            </el-icon>
          </template>
        </row-wrapper>
        <!-- 日期 -->
        <row-wrapper
            :title="item.label"
            v-if="couldShowIt(item, 'el-date-picker')"
        >
          <DateInput v-model="item.conditionValue" title="所选日期"></DateInput>
          <template #action>
            <el-icon @click="onDelCondition(item)">
              <Delete/>
            </el-icon>
          </template>
        </row-wrapper>
        <!-- 时间 -->
        <row-wrapper
            :title="item.label"
            v-if="couldShowIt(item, 'el-time-picker')"
        >
          <TimeInput v-model="item.conditionValue" title="所选时间"></TimeInput>
          <template #action>
            <el-icon @click="onDelCondition(item)">
              <Delete/>
            </el-icon>
          </template>
        </row-wrapper>
        <!-- 选择控件 -->
        <row-wrapper
            :title="item.label"
            v-if="couldShowIt(item, 'el-radio-group','el-checkbox-group','el-select')"
        >
          <FcSelect :multiple="true" :options="item.options" v-model="item.conditionValue"/>
          <template #action>
            <el-icon @click="onDelCondition(item)">
              <Delete/>
            </el-icon>
          </template>
        </row-wrapper>
        <!-- 部门 -->
        <row-wrapper
            :title="item.label"
            v-if="couldShowIt(item, 'fc-dept-select','fc-target-dept-select')"
        >
          <fc-dept-select v-model="item.conditionValue" :multiple="true"/>
          <template #action>
            <el-icon @click="onDelCondition(item)">
              <Delete/>
            </el-icon>
          </template>
        </row-wrapper>
        <!-- 人员 -->
        <row-wrapper
            :title="item.label"
            v-if="couldShowIt(item, 'fc-user-select')"
        >
          <fc-user-select v-model="item.conditionValue" :multiple="true"/>
          <template #action>
            <el-icon @click="onDelCondition(item)">
              <Delete/>
            </el-icon>
          </template>
        </row-wrapper>
        <!-- 岗位 -->
        <row-wrapper
            :title="item.label"
            v-if="couldShowIt(item, 'fc-role-select')"
        >
          <fc-role-select v-model="item.conditionValue" :multiple="true"/>
          <template #action>
            <el-icon @click="onDelCondition(item)">
              <Delete/>
            </el-icon>
          </template>
        </row-wrapper>
      </template>
      <row-wrapper direction="column">
        <el-badge :value="notUseConNum" :hidden="notUseConNum<1">
          <el-button type="primary" size="small" icon="Plus" @click="dialogVisible=true">添加条件</el-button>
        </el-badge>
      </row-wrapper>
    </section>
    <el-dialog title="选择条件" v-model="dialogVisible" width="500px" :append-to-body="true"
               custom-class="condition-dialog">
      <el-checkbox-group v-model="showingPCons">
        <!--        <el-checkbox :label="-1">发起人</el-checkbox>-->
        <el-checkbox v-for="(item, index) in pconditions" :key="index" :label="item.label" :value="item.formId">
        </el-checkbox>
      </el-checkbox-group>
    </el-dialog>
    <div class="actions">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button size="small" type="primary" @click="confirm">确定</el-button>
    </div>
  </el-drawer>
</template>
<script setup>
import {NodeUtils} from "../FlowCard/util.js";
import RowWrapper from './RowWrapper';
import NumInput from "./NumInput";
import flowStore from "@/views/flow/flowStore.js";
import {Delete} from "@element-plus/icons-vue";
import {isNotEmptyArray} from "@/views/flow/tool.js";
import FcUserSelect from "@/views/flow/formCompoents/FcUserSelect/index.vue";
import FcRoleSelect from "@/views/flow/formCompoents/FcRoleSelect/index.vue";
import FcSelect from "@/views/flow/formCompoents/FcSelect/index.vue";
import DateInput from "@/views/flow/createDirectly/Process/PropPanel/DateInput.vue";
import TimeInput from "@/views/flow/createDirectly/Process/PropPanel/TimeInput.vue";
import FcDeptSelect from "@/views/flow/formCompoents/FcDeptSelect/index.vue";
import FcRadio from "@/views/flow/formCompoents/FcRadio/index.vue";
const userSelect = ref(undefined)
const rangeType = {
  'lt': '<',
  'lte': '≤',
  'gt': '>',
  'gte': '≥',
  'eq': '=',
}
const directorOptions = ref(
    [
      {
        label: "直接主管",
        value: 1
      },
      {
        label: "二级主管",
        value: 2
      },
      {
        label: "三级主管",
        value: 3
      }
      ,
      {
        label: "四级主管",
        value: 4
      }
      ,
      {
        label: "五级主管",
        value: 5
      }
      ,
      {
        label: "六级主管",
        value: 6
      }
    ]
)
const emit = defineEmits(['confirm',
  'cancel']);
const props = defineProps({
  value: Object,
  processData: Object
});
//审批人表单权限
const approverFormOperate = ref(null)
//发起人表单权限
const initiatorFormOperate = ref(null)
//抄送人表单权限
const copyFormOperate = ref(null)
const defaultApproverForm = {
  // 审批人集合
  approvers: [],
  // 指定审批人
  assigneeType: "user",
  // 表单操作权限集合
  formOperates: [],
  //是否为会签
  counterSign: false,
  // 审批类型为自选 出现 optionalMultiUser optionalRange
  optionalMultiUser: false
}
const defaultInitiatorForm = {
  // 指定审批人
  assigneeType: "all",
  // 审批人集合
  approvers: [],
}
const defaultCopyForm = {
  approvers: [], // 审批人集合
  assigneeType: "user", // 指定审批人
}
//属性面板侧滑显示和隐藏
const visible = ref(false);
const titleInputVisible = ref(false);
const initiatorActiveName = ref("config");
const approverActiveName = ref("config");
const copyActiveName = ref("config");
const showingPCons = ref([]);
const pconditions = ref([]);
const dialogVisible = ref(false);
const properties = ref({});
//固定条件，发起人
const initiator = ref(undefined);
const priorityLength = ref(0);
//抄送人节点数据
const copyCollection = ref({
  user: [], // 人员
  role: [], // 岗位
});
//发起人节点数据
const initiatorCollection = ref({
  user: [], // 人员
});
//审批人节点数据
const approverCollection = ref({
  user: [], // 人员
  role: [], // 岗位
  director: [], // 发起人主管
  targetDeptDirector: [], // 目标部门主管
  targetUserDirector: [], // 目标人员
  fixedUserDirector: [], // 固定人员
  projectCodeDirector: [] // 项目编码
});
const resetInitiatorCollection = () => {
  initiatorCollection.value = {
    user: [], // 人员
  }
}
const resetCopyCollection = () => {
  copyCollection.value = {
    user: [], // 人员
    role: [], // 岗位
  }
}
const resetApproverCollection = () => {
  approverCollection.value = {
    user: [], // 人员
    role: [], // 岗位
    director: [], // 发起人主管
    targetDeptDirector: [], // 目标部门主管
    targetUserDirector: [], // 目标人员
    fixedUserDirector: [], // 固定人员
    projectCodeDirector: [] // 项目编码
  }
}
const useDirectorProxy = ref(true);
const copyUseDirectorProxy = ref(true);
const initiatorForm = ref(JSON.parse(JSON.stringify(defaultInitiatorForm)));
const approverForm = ref(JSON.parse(JSON.stringify(defaultApproverForm)));
const copyForm = ref(JSON.parse(JSON.stringify(defaultCopyForm)));
const approverAssigneeTypeOptions = ref([
  {
    label: '指定成员',
    value: 'user'
  },
  {
    label: '主管',
    value: 'director'
  },
  {
    label: '角色',
    value: 'role'
  },
  {
    label: '发起人自己',
    value: 'myself'
  },
]);
const counterSignOptions = ref([
  {
    label: '会签（须所有审批人同意）',
    value: true
  },
  {
    label: '或签（一名审批人同意或拒绝即可）',
    value: false
  },
]);
const copyAssigneeTypeOptions = ref([
  {
    label: '指定成员',
    value: 'user'
  },
  {
    label: '主管',
    value: 'director'
  },
  {
    label: '角色',
    value: 'role'
  }
]);
const initiatorAssigneeTypeOptions = ref([
  {
    label: '所有人',
    value: 'all'
  },
  {
    label: '指定成员',
    value: 'user'
  },
]);
const isConditionNode = computed(() => props.value ? NodeUtils.isConditionNode(props.value) : false);
const isApproverNode = computed(() => props.value ? NodeUtils.isApproverNode(props.value) : false);
const isStartNode = computed(() => props.value ? NodeUtils.isStartNode(props.value) : false);
const isCopyNode = computed(() => props.value ? NodeUtils.isCopyNode(props.value) : false);
const notUseConNum = computed(() => {
  if (pconditions.value && showingPCons.value) {
    return pconditions.value.length - showingPCons.value.length + 1
  } else {
    return 0
  }
});
//审批人节点权限
const getApproverFormOperates = () => {
  let res = approverForm.value.formOperates
  return res;
};
//发起人节点权限
const getInitiatorFormOperates = () => {
  let res = initiatorForm.value.formOperates;
  return res;
};
//抄送人节点权限
const getCopyFormOperates = () => {
  let res = copyForm.value.formOperates;
  return res;
};
const changeAllApproverFormOperate = (val) => {
  const target = approverForm.value;
  target.formOperates.forEach(t => t.formOperate = val);
};
const changeAllInitiatorFormOperate = (val) => {
  const target = initiatorForm.value
  target.formOperates.forEach(t => t.formOperate = val);
};
const changeAllCopyFormOperate = (val) => {
  const target = copyForm.value;
  target.formOperates.forEach(t => t.formOperate = val);
};
const couldShowIt = (item,
                     ...tag) => {
  return tag.includes(item.tag) && showingPCons.value.includes(item.formId);
};
const initFormOperates = (target) => {
  const formOperates = target.properties && target.properties.formOperates || [];
  const res = [];
  const defaultType = isCopyNode.value ? 1 : (isApproverNode.value ? 1 : 2);
  const getPermissionById = id => {
    const permission = formOperates.find(t => t.formId === id);
    return permission !== undefined ? permission.formOperate : defaultType;
  };
  const format = (list,
                  parentName = '') => list.map(t => {
    const data = {
      formId: t.formId,
      vModel: t.vModel,
      required: t.required,
      label: parentName ? [parentName,
        t.label].join('.') : t.label,
      formOperate: getPermissionById(t.formId)
    };
    res.push(data);
    Array.isArray(t.children) && format(t.children,
        t.label);
  });
  const formItems = flowStore.state.formItemList.filter(t => t.cmpType !== 'custom');
  format(formItems);
  return res;
};
const conditionNodeComfirm = async () => {
  let nodeContent = '';
  const conditions = [];
  showingPCons.value
      .map(fid => pconditions.value.find(t => t.formId === fid))
      .forEach(t => {
        if (!t) return;
        const cValue = t.conditionValue;
        if (cValue === undefined || cValue === null) return;
        if (['el-input-number',
          'el-date-picker',
          'el-time-picker',
          'fc-amount',
          'fc-calculate'].includes(t.tag)) {
          if (cValue.type === 'bet') {
            const numVal = cValue.value;
            nodeContent += `[${numVal[0]} ${rangeType[numVal[1]]} ${t.label} ${rangeType[numVal[2]]} ${numVal[3]}] \n`;
          } else {
            nodeContent += `[${t.label} ${rangeType[cValue.type]} ${cValue.value}] \n`;
          }
        } else if ([
          'el-select',
          'el-radio-group',
          'el-checkbox-group',
          'fc-dept-select',
          'fc-target-dept-select',
          'fc-role-select',
          'fc-user-select',
        ].includes(t.tag)) {
          nodeContent += `[${t.label} = ${cValue.map((res) => {
            return res.label
          })
              .join(',')}] \n`;
        } else {
          nodeContent += `[${t.label} = ${cValue}] \n`;
        }
        const res = {
          formId: t.formId,
          conditionValue: cValue,
          vModel: t.vModel,
          label: t.label,
          node: t
        };
        conditions.push(res);
      });
  properties.value.conditions = conditions;
  //设置发起人的显示
  if (isNotEmptyArray(initiator.value)) {
    properties.value.initiator = initiator.value;
    nodeContent += '发起人：' +
        initiator.value.map((res) => res.userName)
            .join(',');
    const initiatorData = flowStore.state.formItemList.find((item) => {
      return item.tag == 'fc-liable-user-select'
    })
    properties.value.initiatorData = initiatorData
  } else {
    if (properties.value.initiatorData) {
      delete properties.value.initiatorData
    }
    delete properties.value.initiator
  }
  emit("confirm",
      properties.value,
      nodeContent || '请设置条件');
  visible.value = false;
};
//发起人确认
const startNodeComfirm = async () => {
  const assigneeType = initiatorForm.value.assigneeType;
  let content = '';
  switch (assigneeType) {
    case('user'): {
      if (isNotEmptyArray(initiatorCollection.value.user)) {
        content = '指定成员：' +
            initiatorCollection.value.user.map((res) => res.userName)
                .join(',');
      }
      break
    }
    case('all'): {
      content = '所有人'
      break
    }
  }
  //设置权限
  const formOperates = initiatorForm.value.formOperates.map(t => ({
    formId: t.formId,
    vModel: t.vModel,
    formOperate: t.formOperate
  }));
  //设置值
  initiatorForm.value.approvers = initiatorCollection.value[assigneeType];
  Object.assign(properties.value,
      initiatorForm.value,
      {formOperates});
  emit("confirm",
      properties.value,
      content);
  visible.value = false;
};
//抄送人确认
const copyNodeConfirm = async () => {
  const assigneeType = copyForm.value.assigneeType;
  let content = '';
  switch (assigneeType) {
    case('user'): {
      if (isNotEmptyArray(copyCollection.value.user)) {
        content = '人员：' +
            copyCollection.value.user.map((res) => res.userName)
                .join(',');
      } else {
        content = '请选择抄送人'
      }
      break
    }
    case('director'): {
      if (!!copyCollection.value.director) {
        let result = directorOptions.value.find(t => t.value === copyCollection.value.director).label
        content = '发起人的：' + result;
      } else {
        content = '请选择审批人'
      }
      break
    }
    case('role'): {
      if (!!copyCollection.value.role) {
        content = '角色：' +
            copyCollection.value.role.map((res) => res.roleName)
                .join(',')
      } else {
        content = '请选择审批人'
      }
      break
    }
  }
  //设置权限
  const formOperates = copyForm.value.formOperates.map(t => ({
    formId: t.formId,
    vModel: t.vModel,
    formOperate: t.formOperate
  }));
  //设置值
  copyForm.value.approvers = copyCollection.value[assigneeType];
  Object.assign(properties.value,
      copyForm.value,
      {formOperates});
  emit("confirm",
      properties.value,
      content || '请设置抄送人');
  visible.value = false;
};
//审批人确认
const approverNodeComfirm = async () => {
  const assigneeType = approverForm.value.assigneeType;
  let content = '';
  switch (assigneeType) {
    case('user'): {
      if (isNotEmptyArray(approverCollection.value.user)) {
        content = '人员：' +
            approverCollection.value.user.map((res) => res.userName)
                .join(',');
      } else {
        content = '请选择审批人'
      }
      break
    }
    case('director'): {
      if (!!approverCollection.value.director) {
        let result = directorOptions.value.find(t => t.value === approverCollection.value.director).label
        content = '发起人的：' + result;
      } else {
        content = '请选择审批人'
      }
      break
    }
    case('role'): {
      if (!!approverCollection.value.role) {
        content = '角色：' +
            approverCollection.value.role.map((res) => res.roleName)
                .join(',')
      } else {
        content = '请选择审批人'
      }
      break
    }
    case('myself'): {
      content = approverAssigneeTypeOptions.value.find(t => t.value === assigneeType).label;
      break
    }
    case('optional'): {
      content = approverAssigneeTypeOptions.value.find(t => t.value === assigneeType).label;
      break
    }
  }
  //设置权限
  const formOperates = approverForm.value.formOperates.map(t => ({
    formId: t.formId,
    vModel: t.vModel,
    formOperate: t.formOperate
  }));
  //设置值
  approverForm.value.approvers = approverCollection.value[assigneeType];
  Object.assign(properties.value,
      approverForm.value,
      {formOperates});
  emit("confirm",
      properties.value,
      content || '请设置审批人');
  visible.value = false;
};
const confirm = () => {
  if (isCopyNode.value) copyNodeConfirm();
  if (isStartNode.value) startNodeComfirm();
  if (isApproverNode.value) approverNodeComfirm();
  if (isConditionNode.value) conditionNodeComfirm();
};
const cancel = () => {
  setTimeout(() => {
        emit("cancel");
        visible.value = false;
      },
      0);
};
const onDelCondition = (condition) => {
  const index = showingPCons.value.findIndex(id => id === condition.formId);
  if (index > -1) {
    showingPCons.value.splice(index,
        1);
    pconditions.value.find(t => t.formId === condition.formId).conditionValue = undefined;
  }
};
const getPrevData = () => {
  return NodeUtils.getPreviousNode(props.value.prevId,
      props.processData);
};
const getPriorityLength = () => {
  priorityLength.value = getPrevData().conditionNodes.length;
};
//初始化发起人面板
const initStartNodeData = () => {
  resetInitiatorCollection();
  initiatorForm.value = props.value.properties;
  if (!props.value.properties['assigneeType']) {
    initiatorForm.value['assigneeType'] = 'all'
  }
  if (initiatorForm.value && initiatorForm.value['assigneeType']) {
    initiatorCollection.value[initiatorForm.value['assigneeType']] = initiatorForm.value.approvers
  }
  initiatorForm.value.formOperates = initFormOperates(props.value);
};
//初始化抄送节点面板
const initCopyNodeData = () => {
  resetCopyCollection()
  copyForm.value = props.value.properties;
  if (!props.value.properties['assigneeType']) {
    copyForm.value['assigneeType'] = 'user'
  }
  if (copyForm.value && copyForm.value['assigneeType']) {
    copyCollection.value[copyForm.value['assigneeType']] = copyForm.value.approvers
  }
  copyForm.value.formOperates = initFormOperates(props.value);
};
//初始化审批人面板
const initApproverNodeData = () => {
  resetApproverCollection()
  approverForm.value = props.value.properties;
  if (!props.value.properties['assigneeType']) {
    approverForm.value['assigneeType'] = 'user'
  }
  if (!props.value.properties['counterSign']) {
    approverForm.value['counterSign'] = false
  }
  if (approverForm.value && approverForm.value['assigneeType']) {
    approverCollection.value[approverForm.value['assigneeType']] = approverForm.value.approvers
  }
  approverForm.value.formOperates = initFormOperates(props.value);
};
//初始化条件面板
const initConditionNodeData = () => {
  let nodeConditions = props.value.properties && props.value.properties.conditions;
  let _pconditions = JSON.parse(JSON.stringify(flowStore.state.processConditions));
  initiator.value = props.value.properties.initiator;
  if (Array.isArray(_pconditions)) {
    showingPCons.value = [-1];
    _pconditions.forEach(t => {
      let temp = undefined;
      if (Array.isArray(nodeConditions)) {
        const con = nodeConditions.find(item => item.formId == t.formId);
        con && con.conditionValue && (temp = con.conditionValue, showingPCons.value.push(t.formId));
      }
      t['conditionValue'] = temp
    });
  }
  pconditions.value = JSON.parse(JSON.stringify(_pconditions));
};
watch(visible,
    (val) => {
      if (!val) {
        titleInputVisible.value = false
        approverForm.value = JSON.parse(JSON.stringify(defaultApproverForm));
        initiatorForm.value = JSON.parse(JSON.stringify(defaultInitiatorForm));
        copyForm.value = JSON.parse(JSON.stringify(defaultCopyForm));
        initiatorActiveName.value = 'config'
        approverActiveName.value = 'config'
        copyActiveName.value = 'config'
        return;
      }
      if (isStartNode.value) initStartNodeData();
      if (isCopyNode.value) initCopyNodeData();
      if (isApproverNode.value) initApproverNodeData();
      if (isConditionNode.value) initConditionNodeData();
    },
    {immediate: true});
watch(() => props.value,
    (newVal) => {
      if (newVal && newVal.properties) {
        visible.value = true;
        properties.value = JSON.parse(JSON.stringify(newVal.properties));
        if (properties.value) {
          NodeUtils.isConditionNode(newVal) && getPriorityLength();
        }
      }
    },
    {
      deep: true,
      immediate: true
    });
onMounted(() => {
  // 初始化逻辑
});
</script>
<style lang="scss">
.condition-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #eee;
  }
}
</style>
<style lang="scss">
.optionBox1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #606266;
  & > *:first-child {
    flex: 0 0 auto;
    margin-right: 12px;
  }
  button {
    span, .el-icon {
      color: #fff !important;
    }
  }
  span {
    color: #aaa;
  }
}
.ProPanelDrawer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .el-drawer__header {
    flex: 0;
    width: 100%;
    text-align: left;
    display: flex;
    header {
      flex: 1;
      width: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      & > * {
        flex: 1 1 50%;
        min-width: 100px;
      }
    }
  }
  .el-drawer__body {
    flex: 1;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    .copy-pane {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      & > * {
        width: 100%;
      }
    }
    .condition-pane {
      flex: 1 1 100%;
      overflow: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      & > * {
        width: 100%;
      }
      .option-box-1 {
        @extend .optionBox1;
      }
    }
    .approver-pane {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      .el-tabs {
        width: 100%;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        .el-tabs__header {
          width: 100%;
          &.is-top {
            width: 100%;
            order: 0;
          }
        }
        .el-tabs__content {
          width: 100%;
          order: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          height: 100%;
          overflow: hidden;
          .el-tab-pane {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            height: 100%;
            overflow: hidden;
            .option-box {
              margin-bottom: 24px;
              .option-box-1 {
                @extend .optionBox1;
              }
            }
            .el-scrollbar {
              width: 100%;
              .form-auth-table {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                & > * {
                  width: 100%;
                }
                .auth-table-header {
                  background: #fafafa;
                  line-height: 40px;
                }
                .row {
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  line-height: 32px;
                  padding: 8px 12px;
                  border-bottom: 1px solid #efefef;
                  .label {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-align: left;
                    font-size: 14px;
                    color: #606266;
                    .required {
                      color: #f56c6c;
                    }
                  }
                  .radio-group {
                    -webkit-box-flex: 2;
                    -ms-flex: 2;
                    flex: 2;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    .el-radio {
                      color: #606266;
                      font-weight: 500;
                      line-height: 1;
                      cursor: pointer;
                      white-space: nowrap;
                      outline: 0;
                      margin-right: 30px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .actions {
      flex: 0;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
